<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>

</head>
<body>
	省份：<select id = "provinceId" onchange = "selectCity(this)">
			<option>---- 请选择 ----</option>
		</select>
	市 ：<select id = "cityId" onchange = "selectArea(this)">
			<option>-- 请选择 --</option>
	   </select>
	区县 ：<select id = "areaId" >
			<option>-- 请选择 --</option>
	   </select>	   
	   <script src="static/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function(){
			$.post(
				"/ST_JavaEE/area?method=selectProvince",
				function(jsonArray){
					console.log(jsonArray);
					$(jsonArray).each(function(){
						var html = "<option value ='"+this.id +"'>"+ this.province+"</option>";
						$("#provinceId").append(html);
					});
				},
				"json"
			);
		});
		function selectCity(province) {
			// this代表的是dom对象
			// var provinceId = province.value;
			var provinceId = $(province).val();
			// 清除下面所有的孩子
			$("#cityId").empty();
			$.post(
				"/ST_JavaEE/area?method=selectCity",
				{"provinceId" : provinceId},
				function(jsonArray) {
					console.log(jsonArray);
					$("#cityId").append("<option>--请选择--</option>");
					$(jsonArray).each(function(){
						var html = "<option value='"+this.id+"'>"+this.city+"</option>";
						$("#cityId").append(html);
					});
				},
				"json"
			);
		}
		function selectArea(city) {
			// this代表的是dom对象
			// var provinceId = province.value;
			var cityId = $(city).val();
			// 清除下面所有的孩子
			$("#areaId").empty();
			$.post(
				"/ST_JavaEE/area?method=selectArea",
				{"cityId" : cityId},
				function(jsonArray) {
					console.log(jsonArray);
					$("#areaId").append("<option>--请选择--</option>");
					$(jsonArray).each(function(){
						// <option value="001">山东省</option>
						var html = "<option value='"+this.id+"'>"+this.area+"</option>";
						$("#areaId").append(html);
					});
				},
				"json"
			);
		}
	</script>

</body>
</html>
